<template>
    <div class="gjqy">
        <div class="fontGjqy">
            <span style="padding: 14px 0 0px 0">关键区域{{gjqyTableShow?"":`/${gjqyId?"编辑":"添加"}数据`}}</span>
        </div>
        <div class="redwTable" v-if="gjqyTableShow">
            <div class="buttonBox">
                <el-button
                        style="margin-right: 10px"
                        class="btnDefault"
                        @click="showGJQYSelect" v-if="!isNopower()"
                >添加区域
                </el-button>
                <el-button class="btnDefault" @click="DelectSelectRow" v-if="!isNopower()">批量删除</el-button>
                <el-dialog
                        style="text-align: left"
                        title="选择关键区域类型"
                        :visible.sync="dialogFormEditShow"
                >
                    <el-form :model="submitForm">
                        <el-form-item label label-width="120">
                            <el-select
                                    class="noBg border1"
                                    v-model="submitForm.region"
                                    placeholder="请选择关键区域"
                            >
                                <el-option
                                        :label="item.lxmc"
                                        :value="item.lxID"
                                        v-for="(item, index) in gjqylxArr"
                                        :key="index"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="changeGjqyDetailBox"
                        >确 定
                        </el-button>
                    </div>
                </el-dialog>
            </div>
            <div class="right_one_body ">
                <div class="table" style="height: 100%;overflow-y: auto">
                    <el-table
                            :data="sliceData"
                            border
                            highlight-current-row
                            ref="multipleTable"
                            style="width: 100%"
                            row-key="gjqyid"
                            @selection-change="selectionChange"
                    >
                        <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
                        <el-table-column prop="gjqymc" label="关键区域名称"></el-table-column>
                        <el-table-column prop="lbmc" label="关键区域类别"></el-table-column>
                        <!--          <el-table-column prop="account" label="目标类别"></el-table-column>-->
                        <!--          <el-table-column prop="mbjb" label="目标级别"></el-table-column>-->
                        <el-table-column prop="dz" label="地址" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="ssbm" label="所属部门"></el-table-column>
                        <el-table-column prop="hsdjmc" label="毁伤等级"></el-table-column>
                        <el-table-column prop="fhdjmc" label="防护等级"></el-table-column>
                        <el-table-column prop="zbsdh" label="值班室电话"></el-table-column>
                        <el-table-column prop label="操作" width="130">
                            <template slot-scope="scope">
              <span @click="editDmt(scope.row)" class="cursor">
                <img src="../../assets/images/dmtIcon.png" title="多媒体信息" v-if="!isNopower()"/>
                  <span  v-if="isNopower()"  class="normalColor mr10 cursor">多媒体</span>
              </span>
                                <span @click="editGjqy(scope.row)" class="cursor ml10 mr10" >
               <img src="../../assets/image/sjlr/编辑_on.png" title="编辑" v-if="!isNopower()"/>
                                    <span v-if="isNopower()"  class="normalColor  cursor">查看</span>
              </span>
                                <span
                                        @click.prevent="DelectRow2(scope.row)" class="normalColor cursor" v-if="!isNopower()">
                <img src="../../assets/image/sjlr/删除_on.png" title="删除"/>
              </span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="page mt20">
                        <pages :page="page" @changePage="changePage1"></pages>
                    </div>
                </div>
            </div>
        </div>
        <div class="gjqyDetailAdd" v-if="!gjqyTableShow">
            <el-form ref="form" :model="form" label-width="180px" style="height: 100%">
                <div class=" txsxstyle" :style="{height:form.gxsxArr.length>0?'50%':'100%'}">
                    <span class="style_title">基本信息</span>
                    <div class="txsxstyle_box">
                        <div class="formBox">
                            <el-form-item
                                    v-for="(item, index) in form.jbsxArr"
                                    :label="item.sxmc"
                                    :key="index"
                                    :prop="'jbsxArr.' + index + '.sxvalue'"
                                    :rules="checkRules(item)"
                            >
                                <el-input :disabled="item.sxzd=='lb'"
                                        class="noBg border1"
                                        v-show="item.sxlx == 0 || item.sxlx == 4 || item.sxlx == 5"
                                        style="width: 440px;"
                                        v-model="item.sxvalue"
                                ></el-input>
                                <el-select
                                        class="noBg border1"
                                        style="width: 440px;"
                                        v-model="item.sxvalue"
                                        v-show="item.sxlx == 1"
                                        placeholder="请选择"
                                >
                                    <el-option
                                            v-for="option in item.selectOption"
                                            :key="option.zdID"
                                            :label="option.zdmc"
                                            :value="option.zdID"
                                    ></el-option>
                                </el-select>

                                <el-date-picker
                                        class="noBg border1"
                                        style="width: 440px;"
                                        v-model="item.sxvalue"
                                        v-show="item.sxlx == 2"
                                        type="datetime"
                                        format="yyyy-MM-dd HH:mm:ss"
                                        value-format="timestamp"
                                        placeholder="选择日期"
                                ></el-date-picker>
                            </el-form-item>
                        </div>
                    </div>
                </div>
                <div class="txsxstyle" v-if="form.gxsxArr.length>0">
                    <span class="style_title">特性属性</span>
                    <div class="txsxstyle_box">
                        <div class="formBox">
                            <el-form-item
                                    v-for="(item, index) in form.gxsxArr"
                                    :key="index"
                                    :label="item.sxmc"
                                    :prop="'gxsxArr.' + index + '.sxvalue'"
                                    :rules="checkRules(item)"
                            >
                                <el-tooltip class="item" effect="dark" :content="item.description" placement="bottom">
                                    <el-input
                                            class="noBg border1"
                                            v-if="item.sxlx == 0 || item.sxlx == 4 || item.sxlx == 5"
                                            style="width: 440px;"
                                            v-model="item.sxvalue"
                                    ></el-input>
                                    <el-select
                                                class="noBg border1"
                                            style="width: 440px;"
                                            v-model="item.sxvalue"
                                            v-if="item.sxlx == 1"
                                            placeholder="请选择"

                                    >
                                        <el-option
                                                v-for="option in item.selectOption"
                                                :key="option.zdID"
                                                :label="option.zdmc"
                                                :value="option.zdID"
                                        ></el-option>
                                    </el-select>
                                    <el-date-picker
                                            class="noBg border1"
                                            style="width: 440px;"
                                            v-model="item.sxvalue"
                                            v-if="item.sxlx == 2"
                                            format="yyyy-MM-dd HH:mm:ss"
                                            value-format="timestamp"
                                            type="datetime"
                                            placeholder="选择日期"
                                    ></el-date-picker>
                                </el-tooltip>
                            </el-form-item>
                        </div>
                    </div>
                </div>
            </el-form>

            <div class="textRight mt20">
                <el-button  v-if="!isNopower()"
                        class="btnDefault"
                        @click="submitGJQYSelect"
                >保存
                </el-button>
                <el-button
                        class="btnDefault"
                        @click="backList"
                >取消
                </el-button>
            </div>
        </div>
        <el-dialog title="关键区域/多媒体信息" :visible.sync="dmtDialog" :close-on-click-modal="false">
            <el-form ref="form" :model="form" label-width="120px" class="dialogDmt">
                <el-form-item width="100%"
                              v-for="(item, index) in form.dmtArr"
                              :label="'图片'+(index+1)"
                              :key="index"
                              :prop="'dmtArr.' + index + '.wjljurl'"
                              :rules="[{ required: true, message: '必填字段', trigger: ['blur','change'] }]"
                >
                    <div class="flexMiddleCenter " style="width:400px">
                        <el-input :disabled="true"
                                  class="noBg border1"
                                  v-model="item.wjljurl"
                        ></el-input>
                        <upload :index="index"
                                @beforeUpload="beforeUploadPhoto(index)"
                                @delImgFromList="delImgFromList"
                                @uploadSuccess="uploadPhotoSuccess"
                                :type="'button'"></upload>
                        <i class="el-icon-circle-plus-outline font24 ml10" @click="addDmtArr" v-if="index==0"></i>
                        <i class="el-icon-remove-outline font24 ml10" @click="deleteDmtArr(index)" v-if="index>0"></i>
                    </div>
                </el-form-item>
            </el-form>
            <div slot="footer"
                 class="dialog-footer">
                <el-button @click="saveDmtArr" class="btnDefault" v-if="!isNopower()">保存</el-button>
                <el-button @click="dmtDialog=false" class="btnDefault">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
  import "../../assets/css/global.css";
  import pages from "../base/pages";
  import { baseServe } from "../../request/api";
  import upload from "../base/upload";

  export default {
    name: "gjqy",
    data() {
      return {
        form: {
          jbsxArr: [],
          gxsxArr: [],
          dmtArr: [
            {
              "dmtid": "",
              "dmtlx": "gjqy",
              "sjid": "",
              "bt": "标题",
              "zz": "",
              "wjm": "文件名",
              "wjlx": "png",
              "wjljurl": ""
            }
          ]
        },
        gjqylxArr: [],
        onlyOther: false,
        dialogFormEditShow: false,
        gjqyTableShow: true,
        gjqyDetailAddShow: false,
        submitForm: {
          name: "",
          region: "",
          date1: "",
          date2: "",
          value1: "",
          delivery: false,
          type: [],
          resource: "",
          desc: ""
        },
        page: {
          //总条数
          total: 0,
          //每页条数
          limit: 10,
          //当前页数
          currentPage: 1,
        },
        tableData: [],
        sliceData: [],
        selectRowArr: [],
        dmtDialog: false,
        photoIndex: ""
      };
    },
    mounted() {
      this.getGjqyTable();
    },
    beforeRouteEnter(to, from, next) {
      next(vm => { // 通过 `vm` 访问组件实例
        let data=vm.$route.params
        if(data.type=='gjqy'){
          vm.gjqyTableShow=false;
          // vm.zyjjmbId = data.row.zyjjmbid;
          vm.$store.state.detailTypeId = data.row.gjqyid;
          vm.submitForm.region = data.row.lb;
          vm.getGjqyLBArr()
          vm.changeGjqyDetailBox();

        }
        if(data.type=='gjqyDmt'){
          vm.gjqyTableShow=true;
          vm.getGjqyTable();
          // vm.zyjjmbId = data.row.zyjjmbid;
          vm.editDmt(data.row)
        }
      })
    },
    computed: {
      zyjjmbId() {
        return this.$store.state.zyjjmbId;
      },
      gjqyId() {
        return this.$store.state.detailTypeId;
      }
    },
    methods: {
      saveDmtArr() {
        this.$refs["form"].validate((valid) => {
          if (valid) {
            let dmtModels = this.form.dmtArr;
            dmtModels.map(v => {
              v.sjid = this.gjqyId;
            });
            baseServe.updatedmt({ dmtModels: dmtModels }).then(() => {
              this.TableShow = true;
              this.dmtDialog = false;
              this.$message({ type: "success", message: "保存成功" });
            });
          } else {
            this.$message({ type: "warning", message: "请按照规则填写选项" });
            return false;
          }
        });
      },
      addDmtArr() {
        this.form.dmtArr.push({
          "dmtid": "",
          "dmtlx": "gjqy",
          "sjid": "",
          "bt": "标题",
          "zz": "",
          "wjm": "文件名",
          "wjlx": "png",
          "wjljurl": ""
        });
      },
      deleteDmtArr(index) {
        this.form.dmtArr.splice(index, 1);
      },
      beforeUploadPhoto(index) {
        this.photoIndex = index;
      },
      uploadPhotoSuccess(data) {
        this.form.dmtArr[this.photoIndex].wjljurl = data.fileDownloadPath;
      },
      delImgFromList(index) {
        this.photoIndex = index;
        this.form.dmtArr[this.photoIndex].wjljurl = "";
      },
      editDmt(row) {
        baseServe
          .cxdmtByType({
            dmtLx: "gjqy",
            sjID: row.gjqyid
          }).then(res => {
          if (res.data.dmtModels && res.data.dmtModels.length > 0) {
            this.form.dmtArr = res.data.dmtModels;
          }else{
             this.form.dmtArr= [
            {
              "dmtid": "",
              "dmtlx": "gjqy",
              "sjid": "",
              "bt": "标题",
              "zz": "",
              "wjm": "文件名",
              "wjlx": "png",
              "wjljurl": ""
            }
          ]
          }
          this.$store.state.detailTypeId = row.gjqyid;
          this.dmtDialog = true;
        });
      },
      DelectRow(row) {
        this.$confirm("此操作将批量删除选择项, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            baseServe.deleteGJQY({ gjqyID: row.gjqyid }).then(() => {
              this.getGjqyTable();
              this.$message({ type: "success", message: "删除成功" });
              this.selectRowArr=[]
            });
          });
      },
      DelectRow2(row) {
        this.$confirm("此操作将删除该项, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            baseServe.deleteGJQY({ gjqyID: row.gjqyid }).then(() => {
              this.getGjqyTable();
              this.$message({ type: "success", message: "删除成功" });
              this.selectRowArr=[]
            });
          });
      },
      DelectSelectRow() {
        let arr = [];
        for (let i = 0; i < this.selectRowArr.length; i++) {
          let target = this.selectRowArr[i].gjqyid;
          arr.push(target);
        }
        if(arr.length){
          this.DelectRow({ gjqyid: arr.join(",") });
          return
        }
        this.$message({ type: "warning", message: "请先勾选需要删除的数据" });
      },
      selectionChange(val) {
        this.selectRowArr = val;
      },
      //判断校验规则
      checkRules(item) {
        let arr = [];
        if (item.isbt == "1" && item.sxlx == "0") {
          arr.push(
            { required: true, message: "必填字段", trigger: ["blur", "change"] },
            { min:2,max:300,message:'长度在2-300个字符',trigger:'blur' }
          );
        }
        if (item.sxlx == 4) {
          arr.push({ validator: this.checkNum, trigger: "blur" });
        }
        if (item.sxmc == "经度") {
          arr.push(
            { validator: this.checkJD, trigger: "blur" },
          );
        }
        if (item.sxmc == "纬度") {
          arr.push(
            { validator: this.checkWD, trigger: "blur" }
          );
        }
        if (item.sxmc == "负责人手机号") {
          arr.push(
            { validator: this.checkMobile2, trigger: "blur" }
          );
        }
        if (item.sxmc == "值班室电话") {
          arr.push(
            { validator: this.checkphone, trigger: "blur" }
          );
        }
        if (item.sxmc == "防空袭负责人" || item.sxmc == "地址" || item.sxmc == "关键设备" ||
        item.sxmc =="防空袭措施" || item.sxmc == "用途" || item.sxmc == "抢险抢修措施" || item.sxmc == "关键部位简称") {
          arr.push(
            { validator: this.title, trigger: "blur" }
          );
        }
        return arr;
      },
      getGjqysxValue() {
        baseServe.seGjqySX({
          zyjjmbId: this.zyjjmbId,
          queryType: "zybw", gjqyID: this.gjqyId
        }).then(res => {
          if (res.data.gjqyModel) {
            let jbsxArrClone = Object.assign([], this.form.jbsxArr);
            this.form.jbsxArr = [];
            jbsxArrClone.map((v) => {
              for (let k in res.data.gjqyModel) {
                if (k == v.sxzd) {
                  v.sxvalue = res.data.gjqyModel[k];
                  if (v.sxlx == 2 && v.sxvalue) {
                    v.sxvalue = new Date(v.sxvalue).getTime();
                  }
                  if (v.sxzd == "lb") {
                    if(v.sxvalue){
                      v.sxvalue = this.checkSelect(v.sxvalue);
                    }
                  }
                }
                if (v.sxzd == "gjbwmc") {
                  v.sxvalue = res.data.gjqyModel.gjqymc;
                }
                if (v.sxzd == "gjbmjc") {
                  v.sxvalue = res.data.gjqyModel.gjqyjc;
                }
              }
            });
            this.form.jbsxArr = jbsxArrClone;
            if (res.data.gjqyModel.traitAttributeInfo && res.data.gjqyModel.traitAttributeInfo.length > 0) {
              this.form.gxsxArr.map((v) => {
                res.data.gjqyModel.traitAttributeInfo.map(k => {
                  if (k.sxmc == v.sxmc) {
                    v.sxvalue = k.sxvalue;
                  }
                });
              });
            }

          }
        });
      },
      //提交
      submitGJQYSelect() {

        this.$refs["form"].validate((valid) => {
          if (valid) {
            let gjqyModel = {};
            this.form.jbsxArr.map(v => {
              if (v.sxzd) {
                gjqyModel[v.sxzd] = v.sxvalue;
                if(v.sxlx==2){
                  params[v.sxzd] =v.sxvalue?new Date(v.sxvalue).getTime() :v.sxvalue
                }
              }
            });
            gjqyModel.zyjjmbid = this.zyjjmbId;
            gjqyModel.gjqymc = gjqyModel.gjbwmc;
            gjqyModel.gjqyjc = gjqyModel.gjbmjc;
            gjqyModel.lb = this.submitForm.region;
            if (this.gjqyId) {
              gjqyModel.gjqyid = this.gjqyId;
            }
            let params = {
              gjqyModel,
              traitAttributeModels: this.form.gxsxArr
            };
            baseServe.updateGjqySX(params).then(() => {
              this.$message({ type: "success", message: "保存成功" });
              if(sessionStorage.getItem("sjwhChoseName")=='2'){
                this.$router.push('/sjwh/gjss',);
              }else{
                this.getGjqyTable();
                this.gjqyTableShow = true;
                this.$refs["form"].resetFields()
              }

            });
          } else {
            this.$message({ type: "warning", message: "请按照规则填写选项" });
            return false;
          }
        });

      },
      //返回
      backList() {
        if(sessionStorage.getItem("sjwhChoseName")=='2'){
          this.$router.push('/sjwh/gjss',);
        }else{
          this.$refs["form"].resetFields()
          this.gjqyTableShow = true;
        }
      },
      //获取共性和个性属性
      async getGjqySX() {
        await baseServe.getGjqySX({ gjqyLxID: "", isGex: 0 }).then(res => {
          if (res.data.gjqySxModels) {
            this.form.jbsxArr = [];
            res.data.gjqySxModels.map(v => {
              v.sxvalue = "";
              if (v.sxlx == "1") {
                v.selectOption = res.data.zds[v.sxID];
              }
              this.form.jbsxArr.push(v);
            });
            this.gjqyDetailAddShow = true;
          }
        });
        await baseServe
          .getGjqySX({ gjqyLxID: this.submitForm.region, isGex: 1 })
          .then(res => {
            if (res.data.gjqySxModels) {
              this.form.gxsxArr = [];
              res.data.gjqySxModels.map(v => {
                v.sxvalue = "";
                if (v.sxlx == "1") {
                  v.selectOption = res.data.zds[v.sxID];
                }
                this.form.gxsxArr.push(v);
              });
              this.gjqyDetailAddShow = true;
            }
          });
      },
      //获取下拉选项
      async getGjqyLBArr(){
      let res= await  baseServe
          .getGjqyLx({ categoryID: this.$store.state.categoryId })
        if (res.data.gjqyLxModels) {
          this.gjqylxArr = res.data.gjqyLxModels;
        }
      },
      //判断是否显示下拉 如果只有 其他直接 查询属性
      showGJQYSelect() {
        this.$store.state.detailTypeId = "";
        this.getGjqyLBArr().then(()=>{
          if(!this.gjqyId){
            if (
              this.gjqylxArr.length == 1 &&
              this.gjqylxArr[0].lxmc == "其他"
            ) {
              this.submitForm.region = this.gjqylxArr[0].lxID;
              this.onlyOther = true;
              this.gjqyTableShow = false;
              this.getGjqySX().then(()=>{
                  this.form.jbsxArr.map(v=>{
                    if(v.sxzd=='lb'){
                      v.sxvalue = this.gjqylxArr[0].lxmc
                    }
                  })
              });
              return;
            }
            this.dialogFormEditShow = true;
          }
        })

      },
      //回显类型
      checkSelect(val){
        let str=''
        this.gjqylxArr.map(v=>{
          if(val==v.lxID){
            str=v.lxmc
          }
        })
        return str
      },
      //显示下拉选择后查询
      changeGjqyDetailBox() {
        if(this.submitForm.region){
          this.gjqyTableShow = false;
          this.dialogFormEditShow = false;
          this.getGjqySX().then(() => {
            if (this.gjqyId) {
              this.getGjqysxValue();
            }else{
              this.form.jbsxArr.map(v=>{
                if(v.sxzd=='lb'){
                  v.sxvalue = this.checkSelect(this.submitForm.region)
                }
              });
            }
          });
        }else{
          this.$message({ type: "warning", message: "请选择类别" });
        }


      },
      //编辑
      editGjqy(row) {
        this.$store.state.detailTypeId = row.gjqyid;
        this.submitForm.region = row.lb;
        this.getGjqyLBArr()
        this.changeGjqyDetailBox();
      },
      //获取表格
      getGjqyTable() {
        baseServe
          .getGjqyTable({
            queryType: "zybw",
            zyjjmbId: this.zyjjmbId
          })
          .then(res => {
            if (res.data.zybwInfos) {
              this.tableData = res.data.zybwInfos;
              this.page.total = this.tableData.length;
              this.page.currentPage=1
              this.pages();
            }
          });
      },
      gjqyDetailAddBack() {
        this.dialogFormEditShow = false;
        this.gjqyTableShow = true;
      },
      //前台分页
      pages() {
        this.page.total = this.tableData.length;
        if (!this.page.total % this.page.limit) {
          this.page.currentPage = this.page.currentPage - 1;
        }
        let begin = (this.page.currentPage - 1) * this.page.limit;
        let end = this.page.currentPage * this.page.limit;
        this.sliceData = this.tableData.slice(begin, end);
      },
      changePage1(data) {
        this.page = data;
        this.pages();
      }
    },
    components: {
      pages,
      upload
    }
  };
</script>

<style lang="less" scoped>
    .gjqy {
        height: 100%;
        width: 100%;
        .dialogDmt {
            height: 380px;
            overflow-y: auto;
            padding-right: 20px;
            &::-webkit-scrollbar {
                height: 6px;
                width: 6px;
            }
            &::-webkit-scrollbar-thumb {
                background: rgba(5, 230, 230, 0.6);
                border-radius: 30px;
            }
        }
        .fontGjqy {
            height: 40px;
            width: 100%;
            font-family: "Microsoft Yahei-Bold";
            color: #00ffff;
            font-size: 18px;
            display: flex;
            margin-bottom: 15px;
            position: relative;
            .el-button {
                position: absolute;
                right: 40px;
                top: 10px;
            }
        }
        .redwTable {
            width: 100%;
            height: 100%;
            overflow-y: auto;
            &::-webkit-scrollbar {
                height: 6px;
                width: 6px;
            }
            &::-webkit-scrollbar-thumb {
                background: rgba(5, 230, 230, 0.6);
                border-radius: 30px;
            }
            .detailTitle {
                font-family: "Microsoft Himalaya";
                font-size: 18px;
                color: #00ffff;
            }
            .buttonBox {
                /*margin-top: 20px;*/
                .el-dialog {
                    width: 400px;
                    height: 200px;
                    .el-dialog__body {
                        padding: 0;
                        width: 400px;
                        .el-select {
                            width: 260px;
                            margin-left: 70px;
                            margin-top: 20px;
                            // .el-input {
                            //   .el-input__inner {
                            //     margin: 0px 0px 0px 0px;
                            //     width: 260px;
                            //     height: 30px;
                            //     background-color: #1a303a;
                            //     border: #00f0ff 1px solid;
                            //     border-radius: 0;
                            //   }
                            //   .el-input--suffix .el-input__inner {
                            //     padding-right: 70px !important;
                            //   }
                            // }
                        }
                    }
                    .dialog-footer {
                        .el-button {
                            background-color: rgba(0, 255, 255, 0.32);
                            border-radius: 15px;
                            height: 30px;
                            line-height: 0;
                            font-family: "Microsoft Himalaya";
                            border: 0px;
                            width: 150px;
                        }
                    }
                }
                .el-button:focus,
                .el-button:hover {
                    color: #e4e4e4;
                    border: none;
                }
                // .btnDefault:active {
                //   // background-color: #0e757a;
                //   /*box-shadow:  0px 0px 10px 5px #08b1b6 inset;*/
                //   // background-image: url("../../assets/image/sjlr/add_on.png");
                //   color: #e4e4e4;
                // }
                // .btnDefault:focus {
                //   background-color: #0e757a;
                //   padding: 10px 30px;
                //   color: #e4e4e4;
                //   border: none;
                // }
            }
            .right_one_body {
                margin-top: 10px;
                background-color: transparent;
                height: calc(100% - 100px);
                width: 100%;
                padding: 0;
                position: relative;
                box-sizing: border-box;
                overflow-y: auto;
                // .el-table th {
                //   background-color: #11657d;
                //   // box-shadow: 0px 0px 1px 1px #2bb69f inset;
                //   color: white;
                // }
                .el-table__body tr.current-row > td {
                    background-color: transparent;
                }

                .page {
                    margin-top: 20px;
                }
            }
        }
        .gjqyDetailAdd {
            height: calc(100% - 105px);
            width: 100%;

            &::-webkit-scrollbar {
                height: 6px;
                width: 6px;
            }
            &::-webkit-scrollbar-thumb {
                background: rgba(5, 230, 230, 0.6);
                border-radius: 30px;
            }
            .jbxxStyle {
                height: 50%;
                width: 100%;
                /*border: 1px solid rgba(0,255,255,0.6);*/
                /*border-top: 2px solid rgba(0,255,255,0.6);*/
                border: 1px solid rgba(5, 230, 230, 0.3);
                border-top: 2px solid #00ffff;
                margin: 0 10px 10px 5px;
                .style_title {
                    height: 30px;
                    font-weight: 700;
                    font-size: 20px;
                    display: block;
                    color: white;
                    padding: 10px;
                    color: #00ffff;
                }
            }
            .jbxxStyle_b {
                height: 50%;
                display: flex;
            }
            .txsxstyle {
                height: 50%;
                width: 100%;
                /*border: 1px solid rgba(0,255,255,0.6);*/
                /*border-top: 2px solid rgba(0,255,255,0.6);*/
                border: 1px solid rgba(5, 230, 230, 0.3);
                border-top: 2px solid #00ffff;
                margin: 0 0px 10px 0px;
                overflow: hidden;
                .el-form-item {
                    width: 50%;
                    display: inline-block;
                }
                .style_title {
                    height: 30px;
                    font-weight: 700;
                    font-size: 20px;
                    display: block;
                    color: white;
                    padding: 10px;
                    color: #00ffff;
                }
                .txsxstyle_box {
                    height: 100%;
                    padding-left: 30px;
                    .formBox {
                        overflow-y: auto;
                        height: calc(100% - 60px);
                        &::-webkit-scrollbar {
                            height: 6px;
                            width: 6px;
                        }
                        &::-webkit-scrollbar-thumb {
                            background: rgba(5, 230, 230, 0.6);
                            border-radius: 30px;
                        }
                    }
                    // .el-form-item {
                    //   .el-form-item__label {
                    //     width: 90px !important;
                    //   }
                    // }
                    .el-icon-delete {
                        position: absolute;
                        right: 20px;
                        top: 10px;
                        color: white;
                        cursor: pointer;
                    }
                    .el-form-item:hover {
                        box-shadow: 0px 0px 10px 5px #08b1b6 inset;
                    }
                }
            }
            .sxbjStyle {
                height: 100%;
                width: 50%;
                /*border: 1px solid rgba(0,255,255,0.6);*/
                /*border-top: 2px solid rgba(0,255,255,0.6);*/
                border: 1px solid rgba(5, 230, 230, 0.3);
                border-top: 2px solid #00ffff;
                margin: 0 10px 10px 10px;
                .style_title {
                    height: 30px;
                    font-weight: 700;
                    font-size: 20px;
                    display: block;
                    color: white;
                    padding: 10px;
                    color: #00ffff;
                }
                .formBox {
                    overflow-y: auto;
                    height: 80%;
                    margin-top: 36px;
                    &::-webkit-scrollbar {
                        height: 6px;
                        width: 6px;
                    }
                    &::-webkit-scrollbar-thumb {
                        background: rgba(5, 230, 230, 0.6);
                        border-radius: 30px;
                    }
                }
                .el-icon-plus {
                    font-size: 20px;
                    color: white;
                    position: absolute;
                    right: 40%;
                    top: 10px;
                    cursor: pointer;
                }
                //
                // .el-input__inner {
                //   background-color: #1a303a;
                //   width: 440px;
                //   border: 1px solid #00f0ff;
                //   height: 30px;
                // }
                .el-button {
                    border: 1px solid #00f0ff;
                    border-radius: 15px;
                    background-color: rgba(0, 255, 255, 0.32);
                    width: 200px;
                    height: 30px;
                    color: white;
                    line-height: 0;
                }
                .el-button:hover {
                    background-color: #1a303a;
                    border: 1px solid #00f0ff;
                    color: white;
                    text-align: center;
                }
            }
        }
    }
</style>
